<template>
  <div>
    <h2>parent - parent - 父组件</h2>
    <h2 @click="changecount">count -- {{ count }}</h2>
    <h2>word -- {{ word }}</h2>
    <div>
      <input type="text" v-model="word" />
    </div>
    <button @click="changeChildone">点击修改子组件 one</button>
    <hr />
    <ChildOne v-if="show" :count="count" :word="word" ref="childone"></ChildOne>
    <hr />
    <ChildTwo @changeParentWord="getNewWord" :changeShow="changeShow"
      ><div>
        <h2>Hello WH2110</h2>
        <h2>hello Vue + React</h2>
      </div>
      <template #dome>
        <div>Dome - Dome - Dome</div>
        <h2>每天都要把代码练好</h2>
      </template>
    </ChildTwo>
  </div>
</template>

<script>
import ChildOne from "./Childone.vue";
import ChildTwo from "./Childtwo.vue";

export default {
  name: "parent",
  components: {
    ChildOne,
    ChildTwo,
  },
  data() {
    return {
      count: 1000,
      word: "Are you ok?",
      show: true,
    };
  },
  methods: {
    getNewWord(word) {
      this.word = word;
    },
    changeChildone() {
      this.$refs.childone.msg = "天天认真学学......";
    },
    changecount() {
      this.count += 100;
    },
    changeShow() {
      this.show = !this.show;
    },
  },
};
</script>